<template>
  <!-- template其实就是template选项 -->
  <!-- 允许我们写到script外面 -->
  <div class="container">
    <WbHeader />
    <WbContent :list="list" />
    <WbFooter @getItem="add" />
  </div>
</template>

<script>
// @表示src目录
// 有了@就可以写绝对定位了
import WbHeader from "@/components/WbHeader.vue";
import WbContent from "@/components/WbContent.vue";
import WbFooter from "@/components/WbFooter.vue";

// 匿名暴露
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          title: "不断开创金融高质量发展新局面",
          content: "中央金融工作会议鲜明提出“加快建设金融强国”的目标",
        },
        {
          id: 2,
          title: "前三季度轻工业运行保持回升向好态势",
          content: "中国轻工业联合会的最新数据显示",
        },
        {
          id: 3,
          title: "深刻认识构建新发展格局的实践逻辑",
          content: "泰国将派最大规模代表团参加第六届进博会",
        },
      ],
    };
  },
  methods: {
    add(obj) {
      // const { title, content } = obj;

      // console.log("add");
      this.list.push({
        id: new Date().getTime(),
        ...obj,
        // title: title,
        // content: content,
      });
    },
  },
  components: {
    WbHeader,
    WbContent,
    WbFooter,
  },
};
</script>

<style scoped>
.container {
  width: 375px;
  height: 667px;
  border: 1px solid #000;
  position: relative;
}
</style>
